import React from "react";
import "../../../static/css/mobile/newslist.css";
import Tloader from 'react-touch-loader';

export default class NewsList extends React.Component{
	constructor(){
		super();
		this.state = {
			newsList : [],
			initializing : 1,
			hasMore : false,
			count : 10
		}
	}
	componentDidMount(){
		this.http();
		// 当滑动到底部的时候，需要做一个延时加载等待?
		//好像是因为请求数据需要一定的时间
		setTimeout(()=>{
			this.setState({
				initializing:2,
				hasMore:true
			})
		},1000)
	}
	//将网络请求封装成一个独立的函数
	http(){
		var result = fetch("http://www.wwtliu.com/sxtstu/news/juhenews.php?type=top&count="+this.state.count,{
			method:"get"
		})
		.then(res => {
			return res.json();
		})
		.then(json => {
			this.setState({
				newsList:json
			})
		})
	}
	handleLoadMore(resove){
		setTimeout(()=>{
			var count = this.state.count;
			this.setState({
				count:count+10,
				hasMore:count>0 && count <30
			})
			this.http();
			resove();
		},1000)
	}
	render(){
		var {newsList,initializing,hasMore}=this.state;
		return(
			<div className='newslist'>
				<Tloader
					initializing={initializing}
					hasMore={hasMore}
					onLoadMore={this.handleLoadMore.bind(this)}
					className="tloader some class">
					
					<ul>
						{
							newsList.map((item,index) =>{
								return (
									<li key={index}>
										<a href={item.url}>
											<img src={item.thumbnail_pic_s} alt=""/>
											<p>{item.title}</p>
										</a>
									</li>
								)
							})
						}
					</ul>
				</Tloader>
			</div>
		)
	}
}